<template>
  <main>
    <el-row :gutter="20">
      <el-col :span="16"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <div id="dayOrder" style="height: 300px"></div>
          </el-card></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <div id="order" style="height: 300px"></div>
          </el-card></div
      ></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <div id="usedSpace" style="height: 300px"></div>
          </el-card></div
      ></el-col>
      <el-col :span="16"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <div id="goods" style="height: 300px"></div>
          </el-card></div
      ></el-col>
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
      <el-col :span="16"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
    </el-row> -->
  </main>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
import {
  dailyOrderCountByOriginIdApi,
  orderStatusCountByOriginIdApi,
} from "@/api/infoApi";
import {
  getWarehousesByManagerApi,
  getGoodsInWarehouseApi,
} from "@/api/warehouseApi";

const warehouseId = ref("");

// 1. 定义状态颜色映射
const STATUS_COLOR_MAP: Record<string, string> = {
  FINISH: "#4a9f68",
  CREATED: "#d6392d",
  INDELIVERY: "#f4a261",
};

type EChartsOption = echarts.EChartsOption;

var dayOrder: EChartsOption;
var usedSpace: EChartsOption;
var goods: EChartsOption;
var order: EChartsOption;
dayOrder = reactive({
  title: {
    text: "日订单量",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["订单量"],
  },
  xAxis: {
    type: "category",
    data: [
      "Mon",
      "Tue",
      "Wed",
      "Thu",
      "Fri",
      "Sat",
      "Sun",
      "Tue",
      "Wed",
      "Thu",
      "Fri",
      "Sat",
      "Sun",
    ],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "订单量",
      stack: "Total",
      data: [150, 230, 224, 218, 135, 500, 260, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
});
usedSpace = reactive({
  title: {
    text: "可用空间",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "5%",
    left: "center",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 654,
          itemStyle: {
            color: "#5c7bd9",
          },
          name: "已用空间",
        },
        {
          value: 200,
          itemStyle: {
            color: "#4a9f68",
          },
          name: "可用空间",
        },
      ],
    },
  ],
});
goods = reactive({
  title: {
    text: "商品数量",
  },
  tooltip: {
    trigger: "item",
  },
  xAxis: {
    type: "category",
    axisLabel: {
      rotate: 15, // 旋转45度
      margin: 20, // 标签与图表间距
      fontSize: 10, // 适当缩小字号
    },
    data: [
      "Mon",
      "Tue",
      "Wed",
      "Thu",
      "Fri",
      "Sat",
      "Sun",
      "Sun",
      "Sun",
      "Sun",
    ],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      itemStyle: {
        color: "#a2d3e0",
      },
      data: [120, 200, 150, 80, 70, 110, 130, 130, 130, 130],
      type: "bar",
    },
  ],
});
order = reactive({
  title: {
    text: "今日订单状态",
  },
  tooltip: {
    trigger: "item",
  },
  xAxis: {
    type: "category",
    data: ["已完成", "待发货", "配送中"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [
        {
          value: 20,
          itemStyle: {
            color: "#4a9f68",
          },
        },
        {
          value: 15,
          itemStyle: {
            color: "#f4a261",
          },
        },
        {
          value: 1,
          itemStyle: {
            color: "#d6392d",
          },
        },
      ],
      type: "bar",
    },
  ],
});
const getWarehouses = async (id: any) => {
  return getWarehousesByManagerApi(id).then((res: any) => {
    console.log("仓库详情", res.data);
    const capacity = res.data[0].capacity;
    const usedSpaces = res.data[0].used_space;
    warehouseId.value = res.data[0].id;
    usedSpace.series = [
      {
        ...usedSpace.series![0],
        data: [
          {
            value: capacity - usedSpaces,
            itemStyle: {
              color: "#4a9f68",
            },
            name: "可用空间",
          },
          {
            value: usedSpaces,
            itemStyle: {
              color: "#5c7bd9",
            },
            name: "已用空间",
          },
        ],
      },
    ];
  });
};
const dayOrderCount = () => {
  return dailyOrderCountByOriginIdApi(Number(warehouseId.value)).then(
    (res: any) => {
      console.log("日订单量", res.data);
      // 确保类型断言安全
      const xAxisData = res.data.map((item: any) => item.date);
      const seriesData = res.data.map((item: any) => item.order_count);

      // 更新响应式数据
      dayOrder.xAxis = {
        ...dayOrder.xAxis,
        data: xAxisData,
      };

      dayOrder.series = [
        {
          ...dayOrder.series![0],
          data: seriesData,
        },
      ];
    }
  );
};
const orderStatusCount = () => {
  return orderStatusCountByOriginIdApi(Number(warehouseId.value)).then(
    (res: any) => {
      console.log("订单状态", res.data);
      const seriesData = res.data.map((item: any) => ({
        value: item.order_count,
        itemStyle: {
          color: STATUS_COLOR_MAP[item.order_status] || "#cccccc", // 默认颜色
        },
      }));
      console.log(seriesData);

      order.series = [
        {
          ...order.series![0],
          data: seriesData,
        },
      ];
    }
  );
};
const getGoodsInWarehouse = () => {
  return getGoodsInWarehouseApi(Number(warehouseId.value)).then((res: any) => {
    console.log("仓库商品", res.data);
    // 确保类型断言安全
    const xAxisData = res.data.map((item: any) => item.goods_name);
    console.log("xAxisData", xAxisData);
    const seriesData = res.data.map((item: any) => item.quantity);

    // 更新响应式数据
    goods.xAxis = {
      ...goods.xAxis,
      data: xAxisData,
    };

    goods.series = [
      {
        ...goods.series![0],
        data: seriesData,
      },
    ];
  });
};
onMounted(async () => {
  const userId = JSON.parse(localStorage.getItem("userId") || "{}");
  console.log("userId", userId);
  await getWarehouses(userId);
  await dayOrderCount();
  await orderStatusCount();
  await getGoodsInWarehouse();
  var dayOrderChart = echarts.init(document.getElementById("dayOrder"));
  var usedSpaceChart = echarts.init(document.getElementById("usedSpace"));
  var goodsChart = echarts.init(document.getElementById("goods"));
  var orderChart = echarts.init(document.getElementById("order"));
  dayOrderChart.setOption(dayOrder);
  usedSpaceChart.setOption(usedSpace);
  goodsChart.setOption(goods);
  orderChart.setOption(order);
});
</script>

<style scoped>
.el-card {
  height: 300px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  height: 300px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
